<script setup lang="ts">
import { ref, watch } from 'vue';
// import { DownloadOutlined } from '@ant-design/icons-vue';
// import { downloadUrl } from '@/utils/index';
import { useRoute } from 'vue-router';
import { listServices } from '@/apis/services';
const content = ref<any>(null);
const route = useRoute();

interface Video {
    videoName: string;
    videoEnName: string;
    videoUrl?: string;
    videoCoverImg?: string;
}

interface Props {
    data?: Video[];
}
// 监听 route.query.type 的变化
watch(
    () => route.query.type,
    async type => {
        if (type) {
            const { data } = await listServices({
                data: {
                    type: type,
                    pType: '1',
                },
            });
            content.value = data;
            console.log('获取到内容了', content.value);
        }
    },
    {
        immediate: true, // 立即执行一次
    },
);

withDefaults(defineProps<Props>(), {
    data: () => [],
});

// 对话框状态
const isDialogOpen = ref(false);

// 当前选中视频
const currentVideo = ref<Video | null>(null);

// 对话框关闭时清空当前选中视频对象
watch(isDialogOpen, val => !val && (currentVideo.value = null));

/**
 * 视频点击事件
 * @param {Video} value
 */
function handleItemClick(value: Video) {
    currentVideo.value = value as Video;
    isDialogOpen.value = true;
}

// function handleDownload(value: Video) {
//     const videoUrl = value?.videoUrl;
//     if (!videoUrl) return;
//     downloadUrl(videoUrl);
// }
</script>

<template>
    <div class="grid grid-cols-3 gap-5 py-12 px-80">
        <template v-for="video in content" :key="video.videoCoverImg">
            <template v-if="video.videoUrl">
                <a-card
                    :bordered="false"
                    :bodyStyle="{
                        position: 'relative',
                        padding: '1rem',
                        overflow: 'hidden',
                    }"
                >
                    <div class="flex flex-col gap-y-6">
                        <div
                            class="relative overflow-hidden rounded-md cursor-pointer"
                            @click="() => handleItemClick(video)"
                        >
                            <img
                                class="block object-cover w-full"
                                :src="video.videoCoverImg"
                                alt=""
                            />
                            <div>
                                <video
                                    class="w-full"
                                    :src="video.videoUrl"
                                    controls
                                 
                                ></video>
                            </div>
                        </div>
                        <div class="flex justify-between">
                            <span class="flex flex-col">
                                <strong class="text-xl">{{
                                    video.videoName
                                }}</strong>
                                <small class="text-sm text-gray-500">{{
                                    video.videoEnName
                                }}</small>
                            </span>
                        </div>
                        <!-- <a-button
                            class="h-auto py-4 text-sm"
                            type="primary"
                            danger
                            @click="() => handleDownload(video)"
                        >
                            <template #icon>
                                <download-outlined
                                    class="text-lg leading-none"
                                />
                            </template>
                            <span>下载 (Download)</span>
                        </a-button> -->
                    </div>
                </a-card>
            </template>
        </template>
    </div>
    <a-modal
        width="50%"
        v-model:open="isDialogOpen"
        :title="`视频教程 - ${currentVideo?.videoName}`"
        :footer="null"
    >
        <video
            class="w-full"
            :src="currentVideo?.videoUrl"
            controls
            autoplay="true"
        ></video>
    </a-modal>
</template>


<style lang="scss" scoped>
.play-icon {
    &::after {
        content: '';
    }

    &::before {
        content: '';
        -webkit-clip-path: polygon(0 0, 0% 100%, 100% 50%);
        clip-path: polygon(0 0, 0% 100%, 100% 50%);
    }
}
</style>
